<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>悠生活</title>
    <link rel="stylesheet" href="css/jquery.fullPage.css">
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="js/ft-carousel/css/ft-carousel.css" />
    <script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>

<div class="content-box">
    <div class="head" id="head">
    <div class="visual-box">
        <div class="head-left clearfloat">
            <div class="head-logo">
                <img src="img/logo.png" />
            </div>
            <div class="head-tel">
                蓝光优居热线
                <span>
                    400-8888-116
                </span>
            </div>

            <ul class="head-right">
                <li class="click-login">
                    <i class="icon-1"></i>登录
                    <label></label>
                </li>
                <li class="click-register">
                    <i class="icon-2"></i>注册
                    <label></label>
                </li>
                <li>
                    <i class="icon-3"></i>设计师登录
                    <label></label>
                </li>
                <li class="top-qr-li">
                    <i class="icon-4"></i>微信公众号
                    <label></label>
                    <div class="top-qr">
                        <div class="top-qr-box">
                            <img src="img/qr.jpg" />
                            <p>
                                悠生活U-life
                            </p>
                            <i></i>
                        </div>
                    </div>
                </li>
                <li>
                    <i class="icon-5"></i>样板间地图
                </li>
            </ul>
        </div>
    </div>
    <div class="nav-bg">
        <div class="visual-box">
            <ul class="nav" id="nav">
                <li>
                    <a href="index.html" class="active">首页</a>
                </li>
                <li>
                    <a href="#page3">悠产品</a>
                    <ul>
                        <li>
                            <a href="#">
                                子产品
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                子产品2
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                子产品3
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#page4">云设计</a>
                </li>
                <li>
                    <a href="fengshui_info_list.htm">居家风水</a>
                </li>
                <li>
                    <a href="#head">家居金融</a>
                </li>
                <li>
                    <a href="comment.html">优居热评</a>
                </li>
                <li>
                    <a href="#head">品质检测</a>
                </li>
                <li>
                    <a href="#page5">悠生活商城</a>
                    <ul>
                        <li>
                            <a href="#">
                                子产品
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                子产品2
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                子产品3
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                子产品4
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                子产品5
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="complaint.html">红邮箱投诉</a>
                </li>
                <li class="nav-last-list">
                    已服务<span>012354</span>位业主
                </li>
            </ul>
        </div>
    </div>
</div>

    <div class="section">
        <div class="visual-box">
            <div class="page-2">
                <div class="page-2-box" id="page-2-box">
                    <div class="left-form">
                        <div class="form-nav">
                            <a href="#" class="active">
                                <i class="icon-6"></i>业主方案
                            </a>
                            <a href="#">
                                <i class="icon-7"></i>类似方案
                            </a>
                        </div>
                        <p class="form-title">
                            已查看方案数
                        </p>
                        <div class="form-number">
                            <span>
                                012345678
                            </span>
                        </div>
                        <form action="#" class="form-box">
                            <div class="input-box">
                                <input type="text" name="user-name" value="" placeholder="请输入您的姓名" />
                            </div>
                            <div class="input-box">
                                <input type="text" name="user-phone" value="" placeholder="请填写手机号码" />
                            </div>
                            <div class="input-box ">
                                <input type="text" name="user-address" class="click-select" value="" readonly="readonly" placeholder="请选择小区地址" />
                                <i class="select-icon"></i>
                                <ul class="select-box">
                                    <li>
                                       中央花园1期
                                    </li>
                                    <li>
                                        中央花园2期
                                    </li>
                                </ul>
                            </div>
                            <p class="agreement">
                                <i><input type="checkbox" name="" checked /></i>我已阅读并接受<a href="#" target="_blank">《装修常见问题条款》</a>
                            </p>
                            <div class="text-center">
                                <button type="button" class="sub-button">立即申请</button>
                            </div>
                        </form>
                    </div>

                    <div class="right-box">
                        <div class="right-top">
                            <img src="img/hezuo.png" />
                        </div>
                        <dl class="right-list">
                            <dt>
                                <i class="icon-9"></i>
                                公司新闻
                            </dt>
                            <dd class="news-title">
                                营销网站正式运营 <time>2018-03-15</time>
                            </dd>
                            <dd class="news-text">
                                蓝光优居营销网站正式上线运行营销，各...
                            </dd>

                            <dd class="news-title">
                                营销网站正式运营 <time>2018-03-15</time>
                            </dd>
                            <dd class="news-text">
                                蓝光优居营销网站正式上线运行营销，各...
                            </dd>
                        </dl>
                    </div>
                    <div class="center-box">
                        <div class="center-banner">
                            <div class="ft-carousel" id="carousel_1">
                                <ul class="carousel-inner">
                                    <li class="carousel-item">
                                        <img src="img/page-2-2.jpg" />
                                    </li>
                                    <li class="carousel-item">
                                        <img src="img/page-2-2.jpg" />
                                    </li>
                                    <li class="carousel-item">
                                        <img src="img/page-2-2.jpg" />
                                    </li>
                                </ul>
                            </div>

                            <!--<p class="dot-box">-->
                                <!--<label></label>-->
                                <!--<label class="active"></label>-->
                                <!--<label></label>-->
                            <!--</p>-->
                        </div>

                        <div class="center-bottom">
                            <div class="bottom-box">
                                <i class="icon-10"></i>
                                <div class="bottom-text">
                                    <h4>
                                        匠心工艺
                                    </h4>
                                    90道精湛工艺，让你安心。
                                </div>
                                <div class="center-line"></div>
                            </div>

                            <div class="bottom-box">
                                <i class="icon-11"></i>
                                <div class="bottom-right-text">
                                    <h4>
                                        业主评价
                                    </h4>
                                    最真实的评价，最完美的服务
                                </div>
                            </div>
                        </div>


                    </div>

                </div>

                <h3 class="page-title mg-top-84">
                    优居价值
                </h3>
                <div class="service-box clearfloat">
                    <div class="value-list">
                        <div class="value-text">
                            <i class="value-1"></i>
                            <h3>
                                全集团支撑
                            </h3>
                            <p>
                                打通蓝光旗下服务链条，<br />所有问题都由我们来解决。
                            </p>
                        </div>
                    </div>
                    <div class="value-list">
                        <div class="value-text">
                            <i class="value-2"></i>
                            <h3>
                                坚决不赚钱
                            </h3>
                            <p>
                                蓝光战略采购，合约可见。<br />坚决不赚钱。
                            </p>
                        </div>
                    </div>
                    <div class="value-list">
                        <div class="value-text">
                            <i class="value-4"></i>
                            <h3>
                                坚守优品质
                            </h3>
                            <p>
                                专岗专职出厂检控，<br />100%符合蓝光品质标准。
                            </p>
                        </div>
                    </div>
                    <div class="value-list">
                        <div class="value-text">
                            <i class="value-3"></i>
                            <h3>
                                所见须所得
                            </h3>
                            <p>
                                我们无限追求效果图与<br />实际效果一致，所见即所得。
                            </p>
                        </div>
                    </div>
                    <div class="value-list">
                        <div class="value-text">
                            <i class="value-5"></i>
                            <h3>
                                全过程可视
                            </h3>
                            <p>
                                施工过程一键查询，施工进度<br />实时自在掌握。
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="section" id="page3">
        <div class="visual-box mg-top-84">
            <h3 class="page-title">
                悠产品
            </h3>
            <div class="list-box clearfloat">
                <div class="list">
                    <div class="list-img">
                        <img src="img/page3-1.jpg" />
                        <div class="layer">
                            <div class="layer-2">
                                <div class="layer-icon"> 》》</div>
                                <div class="layer-text layer-text5"></div>
                                <p>
                                    尊享高端体验
                                </p>
                                <button>
                                    查看详情
                                </button>
                            </div>
                            <div class="layer-1">
                                <div class="layer-icon"> 》》</div>
                                <div class="layer-text layer-text4"></div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="list">
                    <div class="list-img">
                        <img src="img/page3-2.jpg" />
                        <div class="layer">
                            <div class="layer-2">
                                <div class="layer-icon"> 》》</div>
                                <div class="layer-text layer-text6"></div>
                                <p>
                                    尊享高端体验
                                </p>
                                <button>
                                    查看详情
                                </button>
                            </div>
                            <div class="layer-1">
                                <div class="layer-icon"> 》》</div>
                                <div class="layer-text layer-text3"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <div class="list-img">
                        <img src="img/page3-3.jpg" />
                        <div class="layer">
                            <div class="layer-2">
                                <div class="layer-icon"> 》》</div>
                                <div class="layer-text layer-text7"></div>
                                <p>
                                    尊享高端体验
                                </p>
                                <button>
                                    查看详情
                                </button>
                            </div>
                            <div class="layer-1">
                                <div class="layer-icon"> 》》</div>
                                <div class="layer-text layer-text2"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <div class="list-img">
                        <img src="img/page3-4.jpg" />
                        <div class="layer">
                            <div class="layer-2">
                                <div class="layer-icon"> 》》</div>
                                <div class="layer-text layer-text8"></div>
                                <p>
                                    尊享高端体验
                                </p>
                                <button>
                                    查看详情
                                </button>
                            </div>
                            <div class="layer-1">
                                <div class="layer-icon"> 》》</div>
                                <div class="layer-text layer-text1"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



        </div>

    </div>
    <div class="section" id="page4">
        <div class="visual-box mg-top-84">
            <h3 class="page-title">
                云设计
                <ul>
                    <!--<li>-->
                        <!--西溪花园-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--北欧风格-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--现代简约-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--简欧风格-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--后现代风格-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--新中式风格-->
                    <!--</li>-->
                    <!--<li style="border: 0">-->
                        <!--美式乡村风格-->
                    <!--</li>-->
                    <li class="more">
                        <a href="sheji.html">更多></a>
                    </li>
                </ul>
            </h3>
            <div class="page4-banner">
                <div class="ft-carousel" id="carousel_2">
                    <ul class="carousel-inner">
                        <li class="carousel-item relative">
                            <img src="img/page4-1.jpg" />
                            <div class="page4-text">
                                <img src="img/page4-pic.png">
                                <div class="text-box">
                                    <h3>
                                        庄新伟
                                    </h3>
                                    <p>
                                        中央美术学院建筑系博士， “十上建筑”CEO及首席建筑师。陈暄的设计理念就是随形而动，不受固定的设计风格的束缚，作品多呈现出别样，浓烈的艺术气息。
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li class="carousel-item relative">
                            <img src="img/page4-1.jpg" />
                            <div class="page4-text">
                                <img src="img/page4-pic.png">
                                <div class="text-box">
                                    <h3>
                                        庄新伟
                                    </h3>
                                    <p>
                                        中央美术学院建筑系博士， “十上建筑”CEO及首席建筑师。陈暄的设计理念就是随形而动，不受固定的设计风格的束缚，作品多呈现出别样，浓烈的艺术气息。
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li class="carousel-item relative">
                            <img src="img/page4-1.jpg" />
                            <div class="page4-text">
                                <img src="img/page4-pic.png">
                                <div class="text-box">
                                    <h3>
                                        庄新伟
                                    </h3>
                                    <p>
                                        中央美术学院建筑系博士， “十上建筑”CEO及首席建筑师。陈暄的设计理念就是随形而动，不受固定的设计风格的束缚，作品多呈现出别样，浓烈的艺术气息。
                                    </p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--<div class="slide">999999</div>-->
                <!--<div class="slide">00000000</div>-->
                <!--<p class="dot-box">-->
                    <!--<label></label>-->
                    <!--<label class="active"></label>-->
                    <!--<label></label>-->
                <!--</p>-->
            </div>

            <div class="page4-bottom-box">
                <div class="bottom-list-box">
                    <div class="bottom-center-box">
                        <img src="img/page4-2.jpg" />
                        <button class="page4-button">
                            自主设计
                        </button>
                    </div>
                </div>
                <div class="bottom-list-box">
                    <div class="bottom-center-box">
                        <img src="img/page4-3.jpg" />
                        <div class="page4-layer">
                            <p>日式简约小户型</p>
                            <button>
                                预约设计师
                            </button>
                            <button>
                                720全景图
                            </button>
                        </div>
                    </div>
                </div>

                <div class="bottom-list-box">
                    <div class="bottom-center-box">
                        <img src="img/page4-4.jpg" />
                        <div class="page4-layer">
                            <p>日式简约小户型</p>
                            <button>
                                预约设计师
                            </button>
                            <button>
                                720全景图
                            </button>
                        </div>
                    </div>
                </div>

                <div class="bottom-list-box">
                    <div class="bottom-center-box">
                        <img src="img/page4-5.jpg" />
                        <div class="page4-layer">
                            <p>日式简约小户型</p>
                            <button>
                                预约设计师
                            </button>
                            <button>
                                720全景图
                            </button>
                        </div>
                    </div>
                </div>

            </div>



        </div>
    </div>


    <div class="section" id="page5">
        <div class="visual-box mg-top-84">
            <h3 class="page-title">
                悠生活商城
                <span>
                    人性化细节  让你的家更智能
                </span>
                <ul>
                    <li>
                        智能门锁
                    </li>
                    <li>
                        智能安防
                    </li>
                    <li>
                        智能照明
                    </li>
                    <li>
                        智能家电
                    </li>
                    <li>
                        智能门窗
                    </li>
                    <li style="border: 0">
                        智能睡眠
                    </li>
                    <li class="more">
                        <a href="shop_index.html">更多></a>
                    </li>
                </ul>
            </h3>

            <div class="page5-top-box">
                <div class="bottom-list-box">
                    <div class="bottom-center-box">
                        <img src="img/page5-1.jpg" />
                        <button class="page4-button page5-button">
                            查看详情
                        </button>
                    </div>
                </div>
                <div class="page5-banner">
                    <div class="list-img">
                        <div class="ft-carousel" id="carousel_3">
                            <ul class="carousel-inner">
                                <li class="carousel-item">
                                    <img src="img/page5-2.jpg" />
                                </li>
                                <li class="carousel-item">
                                    <img src="img/page5-2.jpg" />
                                </li>
                                <li class="carousel-item">
                                    <img src="img/page5-2.jpg" />
                                </li>
                            </ul>
                        </div>
                        <!--<img src="img/page5-2.jpg" />-->
                        <!--<p class="dot-box">-->
                            <!--<label></label>-->
                            <!--<label class="active"></label>-->
                            <!--<label></label>-->
                        <!--</p>-->
                    </div>
                </div>
            </div>


            <div class="page5-bottom-box">
                <div class="bottom-list-box">
                    <div class="buy-box">
                        <h4>
                            今日已有<span>42</span>人选择悠生活基础包
                        </h4>
                        <ul>
                            <li>
                                <p>
                                    成都135****8792
                                    <span>
                                        软包114㎡
                                    </span>
                                </p>
                                <div class="buy-time">
                                    2018-01-29
                                </div>
                            </li>
                            <li>
                                <p>
                                    成都135****8792
                                    <span>
                                        软包114㎡
                                    </span>
                                </p>
                                <div class="buy-time">
                                    2018-01-29
                                </div>
                            </li>
                            <li>
                                <p>
                                    成都135****8792
                                    <span>
                                        软包114㎡
                                    </span>
                                </p>
                                <div class="buy-time">
                                    2018-01-29
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="bottom-list-box">
                    <div class="bottom-center-box">
                        <img src="img/page5-3.jpg" />
                    </div>
                </div>
                <div class="bottom-center-list">
                    <div class="bottom-center-box">
                        <img src="img/page5-4.jpg" />
                    </div>
                </div>
            </div>


        </div>
    </div>


    <!--第六屏star-->
    <div class="visual-box mg-top-84">
        <h3 class="page-title">
            合作品牌
            <!--<span>-->
                    <!--国内外一线品牌力量匠心筑家-->
                <!--</span>-->
        </h3>
    </div>
    <div class="section">


        <div class="page6-bg">
            <div class="visual-box">
                <div class="page6-box clearfloat">
                    <div class="page6-list">
                        <img src="img/page6-1.jpg" />
                    </div>
                    <div class="page6-list">
                        <img src="img/page6-2.jpg" />
                    </div>
                    <div class="page6-list">
                        <img src="img/page6-3.jpg" />
                    </div>
                    <div class="page6-list">
                        <img src="img/page6-4.jpg" />
                    </div>
                    <div class="page6-list">
                        <img src="img/page6-5.jpg" />
                    </div>
                    <div class="page6-list">
                        <img src="img/page6-6.jpg" />
                    </div>
                </div>
            </div>

        </div>


    </div>
    <div class="footer">
        <div class="visual-box clearfloat">
            <div class="footer-left clearfloat">
                <div class="footer-left-list">
                    <dl>
                        <dt>
                            品牌实力
                        </dt>
                        <dd>
                            <a href="#">品牌介绍</a>
                        </dd>
                        <dd>
                            <a href="#">企业文化</a>
                        </dd>
                        <dd>
                            <a href="#">全国布局</a>
                        </dd>
                    </dl>
                </div>
                <div class="footer-left-list">
                    <dl>
                        <dt>
                            V8生活家
                        </dt>
                        <dd>
                            <a href="#">硬包装</a>
                        </dd>
                        <dd>
                            <a href="#">软包装</a>
                        </dd>
                        <dd>
                            <a href="#">智能家居</a>
                        </dd>
                        <dd>
                            <a href="#">家庭园艺</a>
                        </dd>
                    </dl>
                </div>
                <div class="footer-left-list">
                    <dl>
                        <dt>
                            产品服务
                        </dt>
                        <dd>
                            <a href="#">高端定制服务</a>
                        </dd>
                        <dd>
                            <a href="#">服务理念</a>
                        </dd>
                        <dd>
                            <a href="#">设计名家</a>
                        </dd>
                        <dd>
                            <a href="#">预定装修</a>
                        </dd>
                    </dl>
                </div>
                <div class="footer-left-list">
                    <dl>
                        <dt>
                            产品优势
                        </dt>
                        <dd>
                            <a href="#">六大优势</a>
                        </dd>
                        <dd>
                            <a href="#">品牌合作伙伴</a>
                        </dd>

                    </dl>
                </div>
                <div class="footer-left-list">
                    <dl>
                        <dt>
                            联系我们
                        </dt>
                        <dd>
                            <a href="#">联系方式</a>
                        </dd>
                        <dd>
                            <a href="#">在线咨询</a>
                        </dd>

                    </dl>
                </div>
            </div>
            <div class="footer-right">
                <div class="service-list">
                    <p>
                        全国客户服务热线
                    </p>
                    <div>
                        028-8780-1675
                    </div>
                    <i></i>
                </div>
                <div class="email">
                    邮编：611731
                </div>
                <div class="email">
                    地址：中国    成都    高新西区    新创路2号附10号
                </div>
                <div class="copyright">
                    ©2017 WWW.BRC-BEEI.COM ALL RIGHTS RESERVED
                </div>
                <div class="qr-box">
                    <img src="img/qr.jpg" />
                    <p>
                        关注蓝光官方微信
                    </p>
                </div>
            </div>
        </div>
    </div>

</div>


<div class="login">
    <div class="login-box">
        <i class="cols"></i>
        <h2>
            登录
            <a href="#" class="click-register lick-hover">
                注册
            </a>
        </h2>
        <div class="login-input">
            <input type="text" name="" placeholder="请输入账号" />
            <i class="icon-user" yClass="icon-user-1"></i>
        </div>
        <div class="login-input">
            <input type="password" name="" placeholder="请输入密码" />
            <i class="icon-pwsd" yClass="icon-pwsd-1"></i>
        </div>
        <p class="error-box">
            <i></i>账号或密码错误
            <a href="#">
                忘记密码？
            </a>
        </p>

        <button class="login-bt" onclick="window.location.href='order.html'">
            登录
        </button>
    </div>
</div>

<div class="login register">
    <div class="login-box">
        <i class="cols"></i>
        <h2>
            注册
            <a href="#" class="click-login lick-hover">
                登录
            </a>
        </h2>
        <div class="login-input warning">
            <input type="text" name="" placeholder="请输入手机号" value="13856458978" />
            <i class="icon-user" yClass="icon-user-1"></i>
        </div>
        <div class="login-input">
            <input type="password" name="" placeholder="请设置密码" />
            <i class="icon-pwsd" yClass="icon-pwsd-1"></i>
        </div>
        <div class="login-input phone-number">
            <input type="text" name="" placeholder="请输入手机验证码" value="" />
            <i class="icon-number" yClass="icon-number-1"></i>
            <button>
                发送验证码
            </button>
        </div>
        <p class="error-box">
            <i></i>账号或密码错误
        </p>
        <p class="agreement">
            <i><input type="checkbox" name="" checked /></i>已阅读并同意<a href="#" target="_blank">《蓝光优居用户使用协议》</a>
        </p>
        <button class="login-bt">
            注册
        </button>
    </div>
</div>
</body>
<script src="js/ft-carousel/js/ft-carousel.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
    $("#carousel_1").FtCarousel({
        index: 1,
        time: 3000
    });
    $("#carousel_2").FtCarousel({
        index: 1,
        time: 3000
    });
    $("#carousel_3").FtCarousel({
        index: 1,
        time: 3000
    });
    $("#nav li a").on('click', function(e) {
//        e.preventDefault();
        $('html, body').animate({
            'scrollTop': $($(this).attr('href')).offset().top
        }, 400);
    });

</script>
</html>